<template>
  <div class="bg-grey-1 q-mb-sm">
    <div class="q-px-md q-pt-md text-subtitle1">{{ menu.name }}</div>
    <div class="row q-px-lg q-py-md q-gutter-lg">
      <div class="column items-center" v-for="child in menu.children" :key="child.name" @click="go(child)">
        <div>
          <q-icon :name="child.icon" class="text-primary" style="font-size: 36px;" />
        </div>
        <div class="text-subtitle2">{{ child.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    menu: Object,
  },
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {
    go(menu) {
      this.$router.push(menu.path);
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus"></style>
